<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>出院结算</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all"/>
    <style>
        #dataFrm{
            margin: -75px 0px 0px 500px;
        }
        .dataFrm_input{
            font-size: 16px;
            width: 150px;
            height: 20px;
            margin-right: 20px;
            margin-bottom: 8px;
        }
        .dataFrm_td{
            display: block;
            width: 80px;
            text-align: right;
        }
        #add{
            margin: 0px;
        }
        #addPay{
            width:200px;
            font-size: 16px;
            width: 150px;
            height: 30px;
            margin-right: 20px;
        }
        #ul{
            display: block;
            width: 740px;
        }
        #ul li{
            display: block;
            float: left;
            font-size: 16px;
            padding-top: 10px;
            width: 368px;
            height: 30px;
        }
    </style>
</head>
<body>
<!-- 搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查询条件</legend>
</fieldset>
<form class="layui-form" method="post" id="searchFrm">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">住院号:</label>
            <div class="layui-input-inline">
                <input type="number" id="shows" lay-verify="required|number" autocomplete="off" class="layui-input" style="width:200px" >
            </div>
        </div>
        <div class="layui-inline" style="position: absolute;left: 340px;top:66px;">
            <div class="layui-input-inline">
                <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSearch">查询</button>
                <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-survey" id="doSub" style="display: none;margin-left: -0px;">结算</button>
            </div>
        </div>
    </div>
</form>
<div style="display: none;padding: 20px" id="disShow" >
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">个人详情</li>
           <!-- <li>检查详情</li>-->
            <li>药品详情</li>
            <li>项目详情</li>
        </ul>
        <div class="layui-tab-content" style="height: 100px;">
            <div class="layui-tab-item layui-show">
                <ul id="ul">
                    <li>姓名：<span id="userName1"></span></li>
                    <li>科室：<span id="department1"></span></li>
                    <li>性别：<span id="sex1"></span></li>
                    <li>医生：<span id="doctorName1"></span></li>
                    <li>年龄：<span id="age1"></span>岁</li>
                    <li>床位：<span id="bedName1"></span></li>
                    <li>电话：<span id="phone1"></span></li>
                    <li>入住：<span id="day1"></span>天</li>
                    <li>地址：<span id="address1"></span></li>
                    <li>入住时间：<span id="registerDate1"></span></li>
                    <li>身份证号：<span id="idcard1"></span></li>
                    <li>出院时间：<span id="endDate1"></span></li>
                    <li>初步诊断：<span id="diagnose1"></span></li>
                    <li>总费用：<span id="price1"></span>元</li>
                    <li>折扣：<span id="discount1"></span></li>
                </ul>
            </div>
            <!--<div class="layui-tab-item"><table class="layui-hide" id="checkup" lay-filter="checkup"></table></div>-->
            <div class="layui-tab-item"><table class="layui-hide" id="yao" lay-filter="yao"></table></div>
            <div class="layui-tab-item"><table class="layui-hide" id="xiangmu" lay-filter="xiangmu"></table></div>
        </div>
    </div>
</div>
<form class="layui-form"  lay-filter="dataFrm" id="dataFrm">
    <input type="hidden" id="show" name="registerid">
    <input type="hidden" id="hidden" name="moneys" value="0">
    <input type="hidden" id="hid" name="userNames">
    <table>
        <tr>
            <td class="dataFrm_td">姓名：</td>
            <td><input type="text" id="ceshi" class="dataFrm_input" name="userName" readonly></td>
            <td class="dataFrm_td">科室：</td>
            <td><input type="text" class="dataFrm_input" name="department" readonly></td>
            <td class="dataFrm_td">金额：</td>
            <td><input type="text" class="dataFrm_input" name="money" readonly></td>
        </tr>
        <tr>
            <td class="dataFrm_td">性别：</td>
            <td><input type="text" class="dataFrm_input" name="sex" readonly></td>
            <td class="dataFrm_td">医生：</td>
            <td><input type="text" class="dataFrm_input" name="doctorName" readonly></td>
            <td class="dataFrm_td">已用：</td>
            <td><input type="text" class="dataFrm_input" id="yong" name="price" readonly></td>
        </tr>
        <tr>
            <td class="dataFrm_td">年龄：</td>
            <td><input type="text" class="dataFrm_input" name="age" readonly></td>
            <td class="dataFrm_td">床位：</td>
            <td><input type="text" class="dataFrm_input" name="bedName" readonly></td>
            <td class="dataFrm_td">余款：</td>
            <td><input type="text" class="dataFrm_input" id="yu" name="prices" readonly></td>
        </tr>
    </table>
</form>
<!-- 数据表格开始 -->
<div  style="display: none;" id="ToolBar">
    <input type="text" name="pay" id="addPay" lay-verify="required|number" autocomplete="off" lay-event="addPay" placeholder="请输入患者名字" class="pay" >
    <button type="button" class="layui-btn layui-btn-sm" lay-event="add" id="add">查询</button>
</div>
<table class="layui-hide" id="pay" lay-filter="pay"></table>
<!-- 数据表格结束 -->
<script src="/static/layui/layui.js"></script>
<script type="text/javascript" th:inline="none">
    var tableIns;
    layui.use([ 'jquery','element', 'layer', 'form', 'table'  ], function() {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var element = layui.element;
        var laydate = layui.laydate;
        //渲染数据表格
        tableIns=table.render({
            elem: '#pay'   //渲染的目标对象
            ,url:'../liao/selRegisters' //数据接口
            ,title: '用户数据表'//数据导出来的标题
            ,toolbar:"#ToolBar"   //表格的工具条
            ,height:'full-200'
            ,page: 1  //是否启用分页, limits: [10, 20, 30]
            ,limits: [7, 20, 30]
            ,limit: 7//默认采用3
            ,cols: [[   //列表数据
                {field:'userName', title:'姓名',align:'center',width:"7%"}
                ,{field:'sex', title:'性别',align:'center',width:"6%",sort: true}
                ,{field:'age', title:'年龄',align:'center',width:"6%",sort: true}
                ,{field:'idcard', title:'身份证号',align:'center',width:"13%"}
                ,{field:'department', title:'科室',align:'center',width:"7%"}
                ,{field:'doctorName', title:'医生',align:'center',width:"7%"}
                ,{field:'bedName', title:'床位',align:'center',width:"7%"}
                ,{field:'registerDate', title:'入院日期',align:'center',width:"11%",sort: true}
                ,{field:'endDate', title:'出院日期',align:'center',width:"11%",sort: true}
                ,{field:'money', title:'预交款',align:'center',width:"7%"}
                ,{field:'price', title:'已用',align:'center',width:"6%"}
                ,{field:'prices', title:'退款',align:'center',width:"6%",templet: function (d) {
                        if (d.prices > 0){
                            return d.prices
                        }else{
                            return 0;
                        }
                    }}
                ,{field:'prices', title:'补缴',align:'center',width:"6%",templet: function (d) {
                        if (d.prices < 0){
                            return 0-d.prices
                        }else{
                            return 0;
                        }
                    }}
            ]]
        })
        //药品显示
        table1=table.render({
            elem: '#yao'   //渲染的目标对象
            ,url:'' //数据接口
            ,title: '用户数据表'//数据导出来的标题
            ,height:'full-200'
            ,page: 1  //是否启用分页, limits: [10, 20, 30]
            ,limits: [7, 20, 30]
            ,limit: 7//默认采用3
            ,cols: [[   //列表数据
                {field:'hospitalpriceid', title:'序号',align:'center'}
                ,{field:'durgname', title:'药品名称',align:'center'}
                ,{field:'durgnum', title:'数量',align:'center'}
                ,{field:'repiceprice', title:'售价',align:'center'}
                ,{field:'repicetotal', title:'总价',align:'center'}
            ]]
        })
        //项目显示
        table2=table.render({
            elem: '#xiangmu'   //渲染的目标对象
            ,url:'' //数据接口
            ,title: '用户数据表'//数据导出来的标题
            ,height:'full-200'
            ,page: 1  //是否启用分页, limits: [10, 20, 30]
            ,limits: [7, 20, 30]
            ,limit: 7//默认采用3
            ,cols: [[   //列表数据
                {field:'hospitalpriceid', title:'序号',align:'center',width:"20%"}
                ,{field:'durgname', title:'项目名称',align:'center',width:"20%"}
                ,{field:'repiceprice', title:'售价',align:'center',width:"20%"}
                ,{field:'htime', title:'手术时间',templet: "<div>{{layui.util.toDateString(d.htime, 'yyyy年MM月dd日 HH:mm:ss')}}</div>",align:'center',width:"40%"}
            ]]
        })
        //检查详情
        table3=table.render({
            elem: '#checkup'   //渲染的目标对象
            ,url:'' //数据接口
            ,title: '用户数据表'//数据导出来的标题
            ,height:'full-200'
            ,page: 1  //是否启用分页, limits: [10, 20, 30]
            ,limits: [7, 20, 30]
            ,limit: 7//默认采用3
            ,cols: [[   //列表数据
                {field:'cid', title:'检查序号',align:'center',width:'20%'}
                ,{field:'userName', title:'姓名',align:'center',width:'20%'}
                ,{field:'content', title:'检查结果',align:'center',width:'20%'}
                ,{field:'ctime', title:'检查时间',templet: "<div>{{layui.util.toDateString(d.ctime, 'yyyy年MM月dd日 HH:mm:ss')}}</div>",align:'center',width:'40%'}
            ]]
        })
        //查询
        $("#doSearch").click(function(){
            if($("#shows").val()==""){
                layer.msg("请输入住院号！");
                $("#shows").select();
                return false;
            }
            $("#hidden").val(0);
            sel();
        });
        //失焦事件
        $("#shows").blur(function(){
            $("#dataFrm")[0].reset();
            $("#show").val($(this).val());
            $("#doSearch").show();
            $("#doSub").hide();
        });
        function sel(){
            var params=$("#dataFrm").serialize();
            $.ajax({
                url: '../liao/selPay',
                dataType: 'json',
                type: 'post',
                data:params,
                success: function (data) {
                    if(data==""){
                        layer.msg("请输入正确的住院号！");
                        $("shows").select();
                    }else{
                        $.each(data, function (index, item) {
                            for(var i in item){
                                $("input[name="+i+"]").val(item[i])
                            }
                        });
                        sels();
                        $("#doSearch").hide();
                        $("#doSub").show();
                    }
                }
            })
        }
        table.on("toolbar(pay)",function(obj){
            if(obj.event=='addPay'){
                $("#hid").val("");
                $(this).blur(function(){
                    $("#hid").val($(this).val());
                });
            }
            if(obj.event=='add') {
                var params=$("#dataFrm").serialize();
                tableIns.reload({
                    url:"../liao/selRegisters?"+params
                })
                $("#hid").val("");
            }
        })
        function sels(){
            var params=$("#dataFrm").serialize();
            //查询余额
            $.post("selSurplus",params,function(inp) {
                if(inp==""){
                    $("#yong").val(0);
                }else{
                    $.each(inp, function (index, item) {
                        for(var i in item){
                            if(i=="repicetotal"){
                                $("#yong").val(item[i]);
                            }
                        }
                    });
                }
                $("#yu").val($("input[name='money']").val()-$("#yong").val());
            })
        }
        //文本框的键盘事件
        $("#shows").keydown(function(){
            $("#doSearch").show();
            $("#doSub").hide();
        });
        //文本框的点击事件
        $("#shows").click(function(){
            $("#doSearch").show();
            $("#doSub").hide();
        });
        //结算事件
        $("#doSub").click(function(){
            var params=$("#dataFrm").serialize();
            //判断是否还有尚未取出的药品
            $.post("selYaos",params,function(inp) {
              if(inp!=0){
                  layer.msg("当前还有尚未取出的药品，请先去取药！");
              }else{
                  //刷新已用
                  sels();
                  //获取剩余钱数
                  var price=$("#yu").val();
                  //显示是否需要补缴
                  var inp="";
                  if(price<0){
                      price=price.substring(1);
                      inp="需要补缴"+price+"元！是否确认出院？";
                  }else if(price>0){
                      inp="需要退回"+price+"元！是否确认出院？";
                  }else{
                      inp="当前没有剩余余款！是否确认出院？";
                  }
                  layer.confirm(inp, {
                      btn : [ '确定', '取消' ]//按钮
                  }, function(index) {
                      layer.close(index);
                      $.post("updLeave",params,function(inp) {
                          layer.msg(inp);
                          location.reload();
                      })
                  })
              }
            })
        });
        //监听行双击事件（双击事件为：rowDouble）
        table.on('rowDouble(pay)', function(obj){
            //获取当前行信息
            var data = obj.data;
            //标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            //提示是否看详情
            layer.confirm("是否查看详情？", {
                btn : [ '是', '否' ]//按钮
            }, function(index) {
                layer.close(index);
                mainIndex=layer.open({
                    type:1,
                    title:'费用详情',
                    content:$("#disShow"),
                    area:['800px','550px'],
                    success:function(index){
                        $.post("../liao/selregis",{registerid:data.registerid},function(inp) {
                            $.each(inp, function (index, item) {
                                for(var i in item){
                                    $("#"+i+"1").html(item[i]);
                                }
                            });
                        })
                        table1.reload({
                            url:"../liao/selPhar?registerid="+data.registerid
                        });
                        table2.reload({
                            url:"../liao/selItem?registerid="+data.registerid
                        })
                        table3.reload({
                            url:"../liao/selCheckup?registerid="+data.registerid
                        })
                    }
                });
            })
        });
    });
</script>
</body>
</html>